﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Advance.aspx.cs" Inherits="jQueryDemo.Advance" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Demo - Advance Example</title>
</head>
<body>
    <form id="frmAdvance" runat="server">
    <div style="position: absolute; right: 0px; top: 0px" class="ui-widget">
        Theme Selector:
        <asp:DropDownList ID="ddlTheme" runat="server" Width="200px" AutoPostBack="true"
            OnSelectedIndexChanged="ddlTheme_SelectedIndexChanged">
        </asp:DropDownList>
    </div>
    <div id="content">
        <div id="client_list">
            <div id="search_box" class="ui-widget">
                <div class="panelTitle ui-widget-header ui-corner-top">
                    Search by Name
                </div>
                <div class="panelContent ui-widget-content ui-corner-bottom">
                    <input type="text" id="search_name" class="floatLeft" />
                    <div id="btnSearch" class="button floatLeft ui-state-default ui-corner-all" style="width: 60px">
                        Search</div>
                </div>
            </div>
            <div id="result_list_loader">
                <div id="result_list" class="ui-widget">
                    <div class="panelTitle ui-widget-header ui-corner-top">
                        Clients found <span class="expand actionButton floatRight ui-icon ui-icon-circle-triangle-e"
                            style="margin-top: 2px;">expand</span>
                    </div>
                    <div class="panelContent ui-widget-content ui-corner-bottom">
                    </div>
                </div>
            </div>
            <div id="client_detail" class="ui-widget">
                <div class="panelTitle ui-widget-header ui-corner-top">
                    Client's Details <span class="close actionButton floatRight ui-icon ui-icon-circle-close"
                        style="margin-top: 2px;">close</span> <span class="minimise actionButton floatRight ui-icon ui-icon-circle-triangle-n"
                            style="margin-top: 2px;">minimise</span>
                </div>
                <div class="panelContent ui-widget-content ui-corner-bottom">
                    <table width="100%">
                        <tr>
                            <td class="header">
                                ID:
                            </td>
                            <td id="txtId">
                            </td>
                        </tr>
                        <tr>
                            <td class="header">
                                First Name:
                            </td>
                            <td id="txtFirstName">
                            </td>
                        </tr>
                        <tr>
                            <td class="header">
                                Last Name:
                            </td>
                            <td id="txtLastName">
                            </td>
                        </tr>
                        <tr>
                            <td class="header">
                                D.O.B:
                            </td>
                            <td id="txtDOB">
                            </td>
                        </tr>
                        <tr>
                            <td class="header">
                                Gender:
                            </td>
                            <td id="txtGender">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div id="drop_loader">
            <div id="drop_wrapper" class="ui-widget">
                <div id="step_1_title" class="panelTitle ui-widget-header ui-corner-top">
                    &nbsp;
                </div>
                <div class="panelContent ui-widget-content ui-corner-bottom">
                    <div id="step_1_wrapper">
                        <div id="client_info">
                            Hugh HOANG - 14680
                        </div>
                        <div id="service_category_wrapper">
                            <div id="service_category_list">
                                <div class="panelTitle ui-widget-header ui-corner-top">
                                    Available Contract(s)
                                </div>
                                <div class="panelContent ui-widget-content ui-corner-bottom">
                                </div>
                            </div>
                            <div id="service_category_loader">
                                <div id="service_category_drop">
                                    <div class="panelTitle ui-widget-header ui-corner-top">
                                        STEP 2 - Drag & Drop a Contract here to continue
                                    </div>
                                    <div class="panelContent ui-widget-content ui-corner-bottom">
                                        <div id="step_2_wrapper">
                                            <div id="service_list">
                                                <div class="panelTitle ui-widget-header ui-corner-top">
                                                    Available Service(s)
                                                </div>
                                                <div class="panelContent ui-widget-content ui-corner-bottom">
                                                </div>
                                            </div>
                                            <div id="delivery_plan">
                                                <div class="panelTitle ui-widget-header ui-corner-top">
                                                    STEP 3 - Drag & Drop a Service here to create a Delivery Plan
                                                </div>
                                                <div class="panelContent ui-widget-content ui-corner-bottom">
                                                    <div id="step_3_wrapper">
                                                        <table width="100%">
                                                            <tr>
                                                                <td class="header">
                                                                    Service:
                                                                </td>
                                                                <td colspan="3" id="txtService">
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="header">
                                                                    Staff:
                                                                </td>
                                                                <td colspan="3">
                                                                    <asp:DropDownList ID="cboStaff" runat="server">
                                                                        <asp:ListItem Text="Staff One 1" Value="1" />
                                                                        <asp:ListItem Text="Staff Two 2" Value="2" />
                                                                        <asp:ListItem Text="Staff Three 3" Value="3" />
                                                                        <asp:ListItem Text="Staff Four 4" Value="4" />
                                                                        <asp:ListItem Text="Staff Five 5" Value="5" />
                                                                        <asp:ListItem Text="Staff Six 6" Value="6" />
                                                                        <asp:ListItem Text="Staff Seven 7" Value="7" />
                                                                        <asp:ListItem Text="Staff Eight 8" Value="8" />
                                                                        <asp:ListItem Text="Staff Nine 9" Value="9" />
                                                                        <asp:ListItem Text="Staff Ten 10" Value="10" />
                                                                    </asp:DropDownList>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="header">
                                                                    Start Date:
                                                                </td>
                                                                <td>
                                                                    <asp:TextBox ID="txtStartDate" runat="server" CssClass="inputText"></asp:TextBox>
                                                                </td>
                                                                <td class="header">
                                                                    End Date:
                                                                </td>
                                                                <td>
                                                                    <asp:TextBox ID="txtEndDate" runat="server" CssClass="inputText"></asp:TextBox>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="header">
                                                                    Time From:
                                                                </td>
                                                                <td>
                                                                    <asp:TextBox ID="txtTimeFrom" runat="server" CssClass="inputText"></asp:TextBox>
                                                                </td>
                                                                <td class="header">
                                                                    Time To:
                                                                </td>
                                                                <td>
                                                                    <asp:TextBox ID="txtTimeTo" runat="server" CssClass="inputText"></asp:TextBox>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    &nbsp;
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="header">
                                                                    Schedule:
                                                                </td>
                                                                <td colspan="3">
                                                                    <div id="chkSchedule">
                                                                        <input type="checkbox" id="Mon" /><label for="Mon">Mon</label>
                                                                        <input type="checkbox" id="Tue" /><label for="Tue">Tue</label>
                                                                        <input type="checkbox" id="Wed" /><label for="Wed">Wed</label>
                                                                        <input type="checkbox" id="Thu" /><label for="Thu">Thu</label>
                                                                        <input type="checkbox" id="Fri" /><label for="Fri">Fri</label>
                                                                        <input type="checkbox" id="Sat" /><label for="Sat">Sat</label>
                                                                        <input type="checkbox" id="Sun" /><label for="Sun">Sun</label>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                        <div id="btnSaveAll" class="button ui-state-default">
                                                            Save
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="service_tooltip" class="ui-widget-content ui-corner-all">
        <table width="100%">
            <tr>
                <td class="header">
                    ID:
                </td>
                <td id="txtSevId">
                </td>
            </tr>
            <tr>
                <td class="header">
                    Name:
                </td>
                <td id="txtSevName">
                </td>
            </tr>
            <tr>
                <td class="header">
                    Code:
                </td>
                <td id="txtSevCode">
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
